<template>
    <div class="star">
        <div class="container">
            <div class="nav">
                <div class="back" @click="$router.go(-1)">
                    <van-icon name="revoke" />
                </div>
                <div class="title">
                    <h4>收藏</h4>
                </div>
            </div>
            <div style="width: 100%;height: 60px;"></div>
            <div class="list">
                <ul>
                    <li v-for="(item, index) in arr">
                        <router-link :to="{ path: '/detail', query: { id: item.id } }">
                            <div class="left">
                                <div class="title">{{ item.title }}</div>
                                <div class="autor">{{ item.hint }}</div>
                            </div>
                            <div class="right">
                                <img :src="item.images" alt="">
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</template>

<style lang="less" scoped>
.star {
    width: 100%;
    height: 667px;
    background-color: #fff;
    position: absolute;
    z-index: 10000;

    .container {
        width: 94%;
        margin: 0 auto;
        position: relative;
    }

    .nav {
        position: fixed;
        height: 60px;
        width: 100%;
        left: 0;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        .back {
            margin-top: 15px;
        }

        .title {
            position: absolute;
            width: 60px;
            top: 15px;
            left: calc(50% - 30px);
        }
    }
    
    ul {
        width: 100%;

        li {
            width: 100%;
            height: 120px;
            border-bottom: 1px solid black;
            position: relative;

            .left {
                position: absolute;
                width: 70%;
                left: 0;
                top: 20px;
                font-size: 16px;

                .autor {
                    margin-top: 10px;
                    font-size: 14px;
                    color: #818181;
                }
            }

            .right {
                width: 25%;
                position: absolute;
                top: 20px;
                right: 0;

                img {
                    width: 100%;
                }
            }
        }
    }
}
</style>

<script>
import { newList } from '@/api/index';
import { oldList } from '@/api/index';
export default {
    data() {
        return {
            arr: [],
            arr1: [],
            arr2: [],
        }
    },
    methods: {
        async getnewList() {
            await newList()
                .then(
                    content => {
                        let { stories, data } = content;
                        let newArr = stories.map(item => {
                            let obj = {}
                            obj.title = item.title;
                            obj.hint = item.hint;
                            obj.images = item.images;
                            obj.id = item.id;
                            return obj;
                        })
                        this.data = data

                        let len = localStorage.length;
                        let newArr2 = new Array();
                        for (let i = 0; i < len; i++) {
                            let getKey = localStorage.key(i);
                            let getVal = localStorage.getItem(getKey)
                            newArr2[i] = {
                                'key': getKey,
                                'val': JSON.parse(getVal),
                            }
                        }
                        // console.log(newArr);
                        for (let i = 0; i < newArr2.length; i++) {
                            // console.log('外层',newArr2[i].val);

                            for (let j = 0; j < newArr.length; j++) {
                                // console.log('内成',newArr[j].id);

                                if (newArr2[i].val == newArr[j].id) {
                                    this.arr.push(newArr[j])
                                }
                            }
                        }
                        // newArr1.shift()
                        // console.log(newArr1);
                        // this.arr=newArr1
                        console.log(this.arr);

                    }
                )
        },
        // async getoldList() {
        //     await oldList()
        //         .then(
        //             content => {
        //                 // console.log('--->',content);
        //                 let { stories, data } = content;
        //                 let newArr = stories.map(item => {
        //                     let obj = {}
        //                     obj.title = item.title;
        //                     obj.hint = item.hint;
        //                     obj.images = item.images;
        //                     obj.id = item.id;
        //                     return obj;
        //                 })
        //                 this.oldArr = [...this.oldArr, ...newArr]
        //             }
        //         )
        // },
        create() {

        },
        getStar() {

        },

    },
    mounted() {
        // this.getStar()
        this.getnewList()
        // this.getoldList()
        // this.create()
    }
}

</script>